<template>
  <div class="balanceDetails">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>

    <scroller
      @on-pullup-loading="getList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',autoRefresh: false,clsPrefix: 'xs-plugin-pullup-'}"
      height="-50"
      :use-pullup="true"
      v-model="status"
    >
      <div class="quotaItem">
        <div class="quotaItem-balance" v-if="list.length">
          <span>总额度 <span class="link-active-class"> {{quotaAmount}}</span></span>
          <span>剩余额度 <span class="link-active-class"> {{quotaResidue}}</span></span>
        </div>
        <ul class="quotaItem-content">
          <li class="quotaItem-content-list" v-for="(item, index) in list"
              :key="index">

            <div class="quotaItem-content-list-text">
              <div>
                <span class="quotaItem-content-list-text-tit">类别: </span>
                <span>{{item.quota_desc}}</span>
              </div>
              <div class="link-active-class">{{item.quota_change}}</div>
            </div>

            <div class="quotaItem-content-list-text">
              <div>
                <span class="quotaItem-content-list-text-tit">时间: </span>
                <span>{{item.add_date}}</span>
              </div>

              <div>
                <span class="quotaItem-content-list-text-tit">剩余: </span>
                <span
                  class="link-active-class quotaItem-content-list-text-price">{{item.quota_residue}}</span>
              </div>
            </div>

          </li>
        </ul>
      </div>
      <load-more
        v-if="!more&&!list.length"
        :show-loading="false"
        :tip="'暂无数据'"
        background-color="#fbf9fe"
      ></load-more>
    </scroller>

  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'balanceDetails',
    data () {
      return {
        xheader: {
          title: '额度明细'
        },
        quotaId: this.$route.query.quotaId,
        quotaAmount: this.$route.query.quotaAmount,
        quotaResidue: this.$route.query.quotaResidue,

        status: {
          pullupStatus: 'default'
        },

        list: [],
        page: 1,
        more: true
      }
    },
    activated () {
      this.init()
    },
    methods: {
      init () {
        this.page = 1
        this.more = true
        this.list = []
        this.getList()
        this.status.pullupStatus = 'disabled'
        this.$nextTick(function () {
          this.$refs.scroller.enablePullup()
          this.$refs.scroller.reset({
            top: 0
          })
          this.status.pullupStatus = 'default'
        })
      },
      async getList () {
        let page = this.page
        let param = {
          page: page,
          quota_id: this.quotaId
        }
        if (!this.more) {
          return
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Me.getQuotaDetailList(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          let { data } = res
          if (page >= data.page_param.lastPage) {
            this.more = false
            this.$refs.scroller.disablePullup()
          } else {
            this.$refs.scroller.donePullup()
          }
          let list = []
          for (const i in data.data) {
            list.push(data.data[i])
          }
          this.page = page + 1
          this.list = [].concat(this.list, list)
          this.$forceUpdate()
        } else {
          this.more = false
          this.$forceUpdate()
          this.$refs.scroller.disablePullup()
        }
      }
    }
  }
</script>

<style lang="less">
  .balanceDetails {
    background: #fff;
    border-top: 1px solid #e2e2e2;

    * {
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    .quotaItem {
      padding: 10px 10px 10px;
      margin-bottom: 60px;
      font-size: 14px;

      .link-active-class {
        color: #b0290f
      }

      .quotaItem-balance {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        & > span:first-child {
          border-right: 1px solid #e2e2e2;
        }

        & > span {
          width: 50%;
          padding: 10px 0;
        }
      }

      .quotaItem-content {
        padding: 10px 0;

        .quotaItem-content-list {
          padding: 5px;
          margin: 0 10px 10px 0;
          width: 100%;
          border-top: 1px solid #e2e2e2;

          &:last-child {
            border-bottom: 1px solid #e2e2e2;
          }

          .quotaItem-content-list-text {
            display: flex;
            margin: 5px 0;
            line-height: 25px;
            justify-content: space-between;

            .quotaItem-content-list-text-tit {
              margin-right: 10px;
              width: 65px;
              text-align: right;
              flex-shrink: 0;
            }
          }
        }
      }
    }
  }
</style>
